<template>
  <div class="app-add-user">
    <div class="app-main">

      <!--<div class="">-->
        <!--门店列表-->
      <!--</div>-->

      <ul class="module-store">
        <li class="item" v-for="(item,index) in storeList" v-if="item.storeType==1">
          <div class="item-header">{{item.storeName}}<span class="item-distance">距离我{{item.distance}}</span></div>
          <dl class="item-body">
            <dd class="item-info">姓名：{{item.name}}</dd>
            <dd class="item-info item-info-phone">电话：<a :href="'tel:' + item.mobile">{{item.mobile}}</a></dd>
            <dd class="item-info">地址：{{item.province+item.city+item.area+item.address}}</dd>
          </dl>
          <div class="item-footer" @click="handleNavigation(item,index)">导航</div>
        </li>
      </ul>
      <div id="allmap" style="display: none;"></div>
    </div>
  </div>
</template>
<script>
  import {Radio, Navbar,Button,MessageBox,Toast ,Checklist,Popup,Picker,Indicator} from 'mint-ui';
  export default {
    data () {
      return {
        storeList:[],
        userlocation: {lng: "", lat: ""},
      }
    },
    beforeRouteEnter (to, from, next) {
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // XXX: 修复iOS版微信HTML5 History兼容性问题
      if (isiOS && to.path !== location.pathname) {
        // 此处不可使用location.replace
        location.assign(to.fullPath)
      } else {
        next()
      }
    },
    mounted(){


      this.getData();
//      this.getStoreData();
      //  调取微信配置接口
      this.url=location.href;
      var params = new URLSearchParams();
      params.append('url',this.url);
      this.$axios({
        method: 'post',
        url:'gp/cardCancel/getCardCancel',
        data:params
      }).then((res)=> {
        this.wxConfig=res.data;
      this.$wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'ww523544f7e1e50c46', // 必填，企业微信的corpID
        timestamp:this.wxConfig.timestamp, // 必填，生成签名的时间戳
        nonceStr: this.wxConfig.nonceStr, // 必填，生成签名的随机串
        signature: this.wxConfig.signature,// 必填，签名，见附录1
        jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
    });
      this.$nextTick(function () {

        Indicator.open({
          text: '加载中...',
          spinnerType: 'snake'
        });
        var _this=this;
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);

        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);

            _this.userlocation.lng=r.point.lng;
            _this.userlocation.lat=r.point.lat;
            console.log(r.point.lng,111)


            var pointB=new BMap.Point(r.point.lng,r.point.lat)
            var params = new URLSearchParams();
            params.append('page',1);
            params.append('pageRow',500);
            _this.$axios({
              method: 'post',
              url:'gp/dataStatics/getStoreList',
              data:params
            }).then((res)=>{
              _this.storeList = res.data.object.rows;

              console.log(res.data.object.rows,123)
              for(var i=0;i<_this.storeList.length;i++){
              var pointA=new BMap.Point(_this.storeList[i].xAxis,_this.storeList[i].yAxis)

                var distance=(map.getDistance(pointA,pointB)).toFixed(2);

                if(distance < 1000)

                  _this.$set(_this.storeList[i], 'distance', distance+"米")
                else if(distance > 1000)
                _this.$set(_this.storeList[i], 'distance', (Math.round(distance/100)/10).toFixed(1) + "公里")
            }
            Indicator.close();
          })
          }
          else {
            alert('failed'+this.getStatus());
          }
        },{enableHighAccuracy: true})

      })
    },
    methods:{
      getData(){
        this.$axios({
          method: 'post',
          url:'gp/app/users/getUserInfoList',
        }).then((res)=>{
          console.log(res);
        if(res.data.statusCode==200){
          this.userList=res.data.object
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:800
          });
        }
      })
      },
      /** 获取门店列表 **/
      getStoreData() {
        var params = new URLSearchParams();
        params.append('page',1);
        params.append('pageRow',500);
        this.$axios({
          method: 'post',
          url:'gp/dataStatics/getStoreList',
          data:params
        }).then((res)=>{
          this.storeList = res.data.object.rows;

        console.log(this.storeList,123)
      })
      },

      /** 导航事件 **/
      handleNavigation(item,index){

        this.$wx.ready(()=>{
          this.$wx.openLocation({
            latitude: parseFloat(item.yAxis), // 纬度，浮点数，范围为90 ~ -90
            longitude: parseFloat(item.xAxis), // 经度，浮点数，范围为180 ~ -180。
            name: '', // 位置名
            address: item.province+item.city+item.area+item.address, // 地址详情说明
            scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为16
            success: (res)=> {

          },
          error: function(res) {
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        }
      });
      })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-add-user{
    background: #f5f5f5;
  }
  .module-store{
    padding:16px;
  }
  .module-store .item{
    background: #fff;
    margin:0 0 16px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.03);
  }
  .module-store .item-header {
    position: relative;
    padding:10px;
    border-bottom: 1px solid #eee;
    font-size:15px;
    color: #333;
  }
  .module-store .item-header .item-distance{
    float: right;
    font-size: 13px;
    color: #bbb;
  }
  .module-store .item-body{
    margin: 0;
    padding:10px;
  }
  .module-store .item-info{
    margin: 0;
    padding:0 0 6px;
    font-size: 14px;
    color: #999;
  }
  .module-store .item-footer{
    padding:10px 0;
    border-top:1px solid #eee;
    text-align: center;
    font-size: 14px;
    color: #c34853 !important;
  }
  .module-store .item-info-phone a{
    text-decoration: underline;
    color: #c34853 !important;

  }
</style>
